﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>热点图</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        body,html,div,ul,li,iframe,p,img{
            border:none;padding:0;margin:0;
        }
        #map{
            width:100%;
            height:570px;
        }
        #menu{
            width:100%;
            height:20px;         
            padding:5px 10px;
            font-size:14px;
            font-family:"微软雅黑";
            left:10px;    
        }
    </style>
</head>
<body>
    <div id="menu">
         设置热点图的参数：
         <label >热点半径（radius size）：<input type="range" id="radius" min="1" max="50" step="1" value="10"/></label>
         <label >模糊尺寸（blur size ）：<input type="range" id="blur"  min="1" max="50" step="1" value="15"/></label>
    </div> 
    <div id="map" > 
    </div>
    <script type="text/javascript">
        var blur = document.getElementById('blur');
        var radius = document.getElementById('radius');
       
        //创建一个Heatmap图层
        var vector = new ol.layer.Heatmap({
            //矢量数据源（读取本地的KML数据）
            source: new ol.source.Vector({
                url: '../data/kml/2012_Earthquakes_Mag5.kml',
                format: new ol.format.KML({
                    extractStyles: false
                })
            }),
            radius: parseInt(radius.value, 10), //热点半径
            blur: parseInt(blur.value, 10) //模糊尺寸            
        });

        //为矢量数据源添加addfeature事件监听
        vector.getSource().on('addfeature', function (event) {
            // 示例数据2012_Earthquakes_Mag5.kml，可从其地标名称提取地震信息
            var name = event.feature.get('name'); //要素的名称属性
            var magnitude = parseFloat(name.substr(2)); //得到要素的地震震级属性（magnitude）
            event.feature.set('weight', magnitude - 5); //设置要素的weight属性
        });
        //创建一个瓦片图层作为底图
        var raster = new ol.layer.Tile({
            source: new ol.source.Stamen({
                layer: 'toner'
            })
        });
        //实例化Map对象加载地图（底图+热点图）
        var map = new ol.Map({
            layers: [raster, vector],
            target: 'map',
            view: new ol.View({
                center: [0, 0],
                minZoom: 2,
                zoom: 2
            })
        });

        //分别为另个参数设置控件（input）添加事件监听，动态设置热点图的参数
        radius.addEventListener('input', function () {
            vector.setRadius(parseInt(radius.value, 10)); //设置热点图层的热点半径
        });
        blur.addEventListener('input', function () {
            vector.setBlur(parseInt(blur.value, 10)); //设置热点图层的模糊尺寸
        });
    </script>
</body>
</html>
